<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .dialog-video-box {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 999;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, .7);
            display: flex;
            justify-content: center;
            align-items: center;
            display: none;
        }

        #my-video {
            width: 100%;
            height: calc(100vw * 0.5);
        }
    </style>
</head>

<body>
    <div class="xxx video-item" data-src="./video.mov">
        fsddfs
    </div>
    <script src="utils/jquery-1.8.3.min.js"></script>
    <script src="./js/common.js"></script>
    <script>
        loadCSS('./utils/video.min.css')
        loadJS('./utils/video.core.min.js')
        window.onload = function () {
            var player
            const openDialogVideo = function (src) {
                player && player.dispose()
                var newContent = `
                <div class="dialog-video-box">
                     <video id="my-video" class="video-js vjs-big-play-centered" controls preload="auto" poster="${src}">
                        <source src="${src}" />
                    </video>
                </div>
            `
                $('body').find('.dialog-video-box').remove()
                $("body").append(newContent);

                setTimeout(() => {
                    $('.dialog-video-box').css({display: 'flex'})
                    let width = $(window).width()
                    let height = $(window).height()
                    if (height > width) $('#my-video').css({height: `${width}px`})
                    player = videojs('my-video', {
                        controls: true,
                        autoplay: true,
                        preload: 'auto',
                        language: 'zh-CN',
                        muted: true,
                        height: $('#my-video').height(),
                        width: $('#my-video').width(),
                        playbackRates: [1, 1.5, 2, 2.5, 3],
                        src: [{
                            src
                        }]
                    }, function () {
                        console.log('播放器初始化完成')
                        player.play()
                    })
                }, 100)
            }

            $('body').on('click', '.video-item', function (event) {
                if (!$(event.currentTarget).hasClass('video-item')) return
                let data = $(event.currentTarget).data()
                data.src && openDialogVideo(data.src)
            })

            $('body').on('click', '.dialog-video-box', function (res) {
                if (!$(res.currentTarget).hasClass('dialog-video-box')) return
                $('body').find('.dialog-video-box').remove()
            })
        }
    </script>
</body>

</html>